<template>
  <div style="width: 909px; height: 583px" class="map">
    <div class="custom-alert" v-if="showAlert" @click.self="closeAlert">
      <div class="alert-content">
        <p>该区域无来信</p>
        <button class="close-btn" @click="closeAlert">关闭</button>
      </div>
    </div>
    <div class="content-detail" v-if="detail">
      <div class="detail-box">
        <div class="detail-title">
          <HelloWorld :mes="title"></HelloWorld>
        </div>
        <div class="close1" @click="close">
          <img src="../../../public/imgs/关闭.png" alt="" />
        </div>
        <div class="detail-item">
          <PieChart6></PieChart6>
        </div>
      </div>
    </div>
    <img src="../../../public/imgs/lbx.png" alt="" srcset="" class="map1" />
    <img src="../../../public/imgs/jt.png" alt="" srcset="" class="map2" />
    <img
      src="../../../public/imgs/GoBake.png"
      title="返回上一层"
      alt=""
      srcset=""
      v-if="currentLevel !== 'china'"
      @click="goBack"
      style="margin-left: 100px;"
    />
    <div id="map-chart" style="width: 909px; height: 600px"></div>
  </div>
</template>

<script>
  import * as echarts from "echarts";
  import chinaJson from "../../assets/china.json";
  import HelloWorld from "../HelloWorld.vue";
  import PieChart6 from "../PageOneDialog/PieChart6.vue";
  export default {
    data() {
      return {
        detail: false,
        chart: null,
        currentLevel: "china",
        currentProvince: "",
        showAlert: false, 
      };
    },
    components: {
      HelloWorld,
      PieChart6,
    },
    mounted() {
      this.initMap();
      this.loadMap("china", "中国");
    },
    methods: {
      closeAlert() {
      this.showAlert = false; // 关闭弹框
    },
      close() {
        this.detail = false;
      },
      initMap() {
        this.chart = echarts.init(document.getElementById("map-chart"));
        this.loadMap("china", "中国");
      },
      loadMap(level, name) {
        let mapDataPromise;
        if (level === "china") {
          mapDataPromise = Promise.resolve(chinaJson); // 全国地图直接使用已加载的json
        } else if (level === "province") {
          mapDataPromise = import(`../../assets/province/${name}.json`); // 动态加载省级地图
        } else if (level === "city") {
          mapDataPromise = import(`../../assets/city/${name}.json`); // 动态加载市级地图
        } else if (level === "wall") {
          mapDataPromise = import("../../assets/河南_郑州市_管城回族区.json"); // 动态加载市级地图
        }
        mapDataPromise
          .then((mapData) => {
            echarts.registerMap(name, mapData.default || mapData);
            const option = {
              title: {
                show: false,
                text: name + "地图",
              },

              tooltip: {
                trigger: "item",
                formatter: "{b}",
              },
              geo: {
                show: true,
                map: name,
                roam: false, // 启用拖拽和缩放 
                zoom: level === "china" ? 1.7 : 1.1,
                // left: "center", // 设置地图离左边的距离
                right: "2%", // 设置地图离右边的距离
                aspectScale: "0.79",
                top: level === "china" ? "34%" : "5%", // 控制缩放级别
                // bottom: "10%", // 设置地图离下边的距离
                // label: {
                //   show: true,
                //   emphasis: {
                //     show: true,
                //   },
                // },
                label: {
                  normal: {
                    show: true,
                    rotate: "tangential",
                    textStyle: {
                      color:
                        level === "china" ? "rgba(147, 235, 248, 1)" : "#fff",
                      fontSize: 14,
                    },
                  },
                  emphasis: {
                    show: true,
                    textStyle: {
                      color:
                        level === "china" ? "rgba(147, 235, 248, 0)" : "#fff",
                    },
                  },
                },
                itemStyle: {
                  normal: {
                    borderColor:
                      level === "china"
                        ? "rgba(147, 235, 248, 0)"
                        : "rgba(147, 235, 248, 1)",
                    borderWidth: 2,
                    areaColor: {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 1,
                      y2: 1,
                      // colorStops: [
                      //   { offset: 1, color: "#0971b4" },
                      //   { offset: 0, color: "#072765" },
                      // ],
                      colorStops: [
                        {
                          offset: 1,
                          color:
                            level === "china"
                              ? "rgba(147, 235, 248, 0)"
                              : "#0971b4",
                        },
                        {
                          offset: 0,
                          color:
                            level === "china"
                              ? "rgba(147, 235, 248, 0)"
                              : "#072765",
                        },
                      ],
                    },
                    // shadowColor: "#0044c2",
                    shadowColor:
                      level === "china" ? "rgba(147, 235, 248, 0)" : "#0044c2",
                    shadowOffsetX: 0,
                    shadowOffsetY: 12,
                  },
                  emphasis: {
                    // areaColor: "#389BB7",
                    areaColor:
                      level === "china" ? "rgba(147, 235, 248, 0)" : "#389BB7",
                    borderWidth: 0,
                  },
                },
              },
              graphic: {
                elements: [
                  {
                    type: "image",
                    style: {
                      width: level === "china" ? 775 : 0,
                      height: level === "china" ? 653 : 0,
                    },
                    left: "7%",
                    top: "-4.5%",
                  },
                ],
              },
              series: [
                {
                  type: "map",
                  geoIndex: 0,
                  selectedMode: false,
                  label: {
                    show: true,
                    emphasis: {
                      show: true,
                    },
                  },
                },
              ],
            };

            this.chart.setOption(option);
            this.chart.off("click");
            this.chart.on("click", this.handleMapClick);
          })
          .catch((error) => {
            console.error("加载地图数据失败:", error);
          });
      },
      handleMapClick(event) {
        const name = event.name;
        if (event.name) {
          if (this.currentLevel === "china") {
            // 下钻到省级地图
            this.currentLevel = "province";
            this.currentProvince = name;
            this.loadMap("province", name);
          } else if (this.currentLevel === "province") {
            // 下钻到市级地图
            this.currentLevel = "city";
            this.loadMap("city", name);
          } else if (event.name === "管城回族区") {
            // 下钻到市级地图
            this.detail = true;
            this.title = `${name}来信量详情`;
          } else {
            // alert("该区域无来信");
            this.showAlert = true; // 显示弹框
          }
        }
      },
      goBack() {
        if (this.currentLevel === "city") {
          this.currentLevel = "province";
          this.loadMap("province", this.currentProvince);
        } else if (this.currentLevel === "province") {
          this.currentLevel = "china";
          this.loadMap("china", "中国");
        }
      },
    },
  };
</script>
<style>
  #map-chart {
    width: 909px;
    height: 583px;
    z-index: 11;
  }
  .map {
    position: absolute;
    z-index: 10;
    opacity: 1;
    top: 13%;
    width: 909px;
    height: 620px;
    left: 27%;
    .map1 {
      position: absolute;
      top: 0;
      left: 130px;
      width: 68%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1;
      animation: myfirst2 15s infinite linear;
      display: flex;
    }
    .map2 {
      position: absolute;
      top: 0;
      left: 130px;
      width: 68%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 3;
      opacity: 0.2;
      animation: myfirst 10s infinite linear;
    }
    .map3 {
      position: absolute;
      top: 0;
      left: 130px;
      width: 68%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 3;
      opacity: 0.3;
    }
  }
  /* 弹框 */
  .content-detail {
    position: absolute;
    left: -57%;
    top: -25%;
    width: 1920px;
    height: 1080px;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99;
  }

  .detail-box {
    width: 1420px;
    height: 700px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url("../../../public/imgs/bg2.png");
    z-index: 100;
    box-sizing: border-box;
    padding: 20px 40px;
  }

  .detail-item {
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;
  }

  .close1 {
    font-size: 24px;
    color: #f30;
    text-align: right;
    padding-right: 20px;
    cursor: pointer;
    position: absolute;
    top: 70px;
    right: 45px;
    z-index: 10;
  }
  .custom-alert {
  position: fixed;
  top: -145px;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.alert-content {
  width: 160px !important;
  height: 100px !important;
  background-color: rgb(154, 178, 221);
  padding: 20px 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  text-align: center;
  position: relative;
}

.alert-content p {
  margin: 0;
  font-size: 16px;
  color: #fff;
}

.close-btn {
  margin-top: 10px;
  padding: 5px 10px;
  font-size: 14px;
  color: white;
  background-color: #f30;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.close-btn:hover {
  background-color: #c00;
}


  @keyframes myfirst2 {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
  }

  @keyframes myfirst {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(-359deg);
    }
  }
</style>
